<template>
  <div v-show="sx_show">
    <header_all :titles="header_title" :close_btn="sx_close"></header_all>
    <div class="all_content" v-bind:style="{height:model_height-44-50+'px'}">
      <ul class="chexing">
        <span class="sx_titles">车型</span>
        <li v-for="item in chexing_list">
          <a @click.stop="GoToCx">
            <i class="bgicon icon-car" v-bind:class="item.icons"></i>
            {{item.names}}
          </a>
        </li>
      </ul>
      <!--车型选择-->
      <ul class="sx_tongyong_con">
        <span class="sx_titles">车牌所在地</span>
        <li v-for="item in cpszd_list">
          <a @click.stop="GoToCPSZ">{{item.names}}</a>
        </li>
      </ul>
      <!--车牌选择-->
      <ul class="sx_tongyong_con">
        <span class="sx_titles">热门车</span>
        <li v-for="item in rmc_list">
          <a @click.stop="GoToRMC">{{item.names}}</a>
        </li>
      </ul>
      <!--热门车选择-->
      <ul class="sx_tongyong_con">
        <span class="sx_titles">变速箱</span>
        <li v-for="item in bsx_list">
          <a @click.stop="GoToBSX">{{item.names}}</a>
        </li>
      </ul>
      <!--变速箱选择-->
      <ul class="sx_tongyong_con">
        <span class="sx_titles">车龄要求 <span class="min_text">(单位:年)</span></span>
        <li v-for="item in cheling_list">
          <a @click.stop="GoToCLYQ">{{item.names}}</a>
        </li>
      </ul>
      <!--车龄选择-->
      <ul class="sx_tongyong_con">
        <span class="sx_titles">行驶里程 <span class="min_text">(单位:万公里)</span></span>
        <li v-for="item in licheng_list">
          <a @click.stop="GoToXSLC">{{item.names}}</a>
        </li>
      </ul>
      <!--历程选择-->
      <ul class="sx_tongyong_con">
        <span class="sx_titles">排量 <span class="min_text">(单位:升)</span></span>
        <li v-for="item in pailiang_list">
          <a @click.stop="GoToPL">{{item.names}}</a>
        </li>
      </ul>
      <!--排量选择-->
      <ul class="sx_tongyong_con">
        <span class="sx_titles">座位数</span>
        <li v-for="item in zuoweishu_list">
          <a @click.stop="GoToZWS">{{item.names}}</a>
        </li>
      </ul>
      <!--座位选择-->
      <ul class="sx_tongyong_con">
        <span class="sx_titles">颜色</span>
        <li v-for="item in yanse_list">
          <a @click.stop="GoToYS"><span class="sezhi" :style="{backgroundColor:item.color}"></span>{{item.names}}</a>
        </li>
      </ul>
      <!--颜色选择-->
      <ul class="sx_tongyong_con">
        <span class="sx_titles">燃油类型</span>
        <li v-for="item in ranyou_list">
          <a @click.stop="GoToRYLX">{{item.names}}</a>
        </li>
      </ul>
      <!--燃油选择-->
      <ul class="sx_tongyong_con">
        <span class="sx_titles">国别</span>
        <li v-for="item in guobie_list">
          <a @click.stop="GoToGB">{{item.names}}</a>
        </li>
      </ul>
    </div>
    <!--国别选择-->
    <div class="sx_btn">
      <div class="sx_info">
        <p>已选条件共<span>707</span>辆车</p>
      </div>
      <div class="btns">
        <a href="#">查看</a>
      </div>

    </div>
  </div>
</template>
<style>

</style>
<script>
  import header_all from '../assembly/all_header.vue'
  export default{
      props:['sx_show','sx_close'],
    data(){
      return {
        msg: 'hello vue',
        header_title: '筛选',
        model_height: '',
        rmc_list: [
          {names: '降价急售'}, {names: '准新车'}, {names: '可迁全国'}, {names: '女车主'}, {names: '7座车'},
          {names: '练手车'}, {names: '女性专场'}, {names: '萌宝专车'}, {names: '今日超值'}
        ],
        bsx_list: [
          {names: '手动'}, {names: '自动'}
        ],
        cheling_list: [
          {names: '1-2年'}, {names: '2-3年'}, {names: '3-4年'}, {names: '4-5年'}, {names: '5-6年'}, {names: '6年以上'}
        ],
        licheng_list: [
          {names: '1-3'}, {names: '3-6'}, {names: '6-9'}, {names: '9-12'}, {names: '12-15'}, {names: '15万以上'}
        ],
        zuoweishu_list: [
          {names: '2座'}, {names: '4座'}, {names: '5座'}, {names: '6座'}, {names: '7座以上'}
        ],
        yanse_list: [
          {names: '黑色', color: '#000000'}, {names: '白色', color: '#ffffff'}, {names: '银灰色', color: '#dfe1de'},
          {names: '深灰色', color: '#707070'}, {names: '红色', color: '#ff5350'}, {names: '橙色', color: '#ffa13f'},
          {names: '绿色', color: '#87e869'}, {names: '蓝色', color: '#4ec1ff'}, {names: '咖啡色', color: '#99691f'},
          {names: '紫色', color: '#d584e9'}, {names: '香槟色', color: '#ead795'}, {names: '黄色', color: '#ffd943'},
          {names: '其他', color: 'e1e1e1'}
        ],
        ranyou_list: [
          {names: '汽油'}, {names: '柴油'}, {names: '电动'}, {names: '油电混合'}, {names: '其他'}
        ],
        pailiang_list:[
          {names: '0-1.0'}, {names: '1.0-2.0'}, {names: '2.0-3.0'}, {names: '3.0-4.0'}, {names: '不限'}
        ],
        guobie_list: [
          {names: '德系'}, {names: '日系'}, {names: '美系'}, {names: '法系'}, {names: '韩系'}, {names: '国产'}
        ],
        chexing_list: [
          {names: '两厢轿车', icons: 'icon-cone'}, {names: '三厢轿车', icons: 'icon-ctwo'}, {names: '跑车', icons: 'icon-cthere'},
          {names: 'SUV', icons: 'icon-c4'}, {names: 'MPV', icons: 'icon-c5'}, {names: '面包车', icons: 'icon-c6'},
          {names: '皮卡', icons: 'icon-c7'}
        ],
        cpszd_list: [
          {names: '本地'}, {names: '外地'}
        ]
      }
    },
    created: function () {
      let win_height = $(window).innerHeight();
      this.model_height = win_height
    },
    components: {
      header_all
    },
    methods: {
      GoToCx: function (e) {
        kk(e)
      },
      GoToCPSZ: function (e) {
        kk(e)
      },
      GoToRMC: function (e) {
        kk(e)
      },
      GoToBSX: function (e) {
        kk(e)
      },
      GoToCLYQ: function (e) {
        kk(e)
      },
      GoToXSLC: function (e) {
        kk(e)
      },
      GoToPL: function (e) {
        kk(e)
      },
      GoToZWS: function (e) {
        kk(e)
      },
      GoToYS: function (e) {
        kk(e)
      },
      GoToRYLX: function (e) {
        kk(e)
      },
      GoToGB: function (e) {
        kk(e)
      }
    }
  }
  function kk(e) {
    let dom = $(e.currentTarget)
    let thisfj = dom.parent().parent()
    thisfj.find('a').removeClass('sx_fous')
    dom.addClass('sx_fous')
  }
</script>
